<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ERSTE SCHRITTE MIT BRACKETS</title>
        <meta name="description" content="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <h1>ERSTE SCHRITTE MIT BRACKETS</h1>
        <h2>Dies ist Ihre Anleitung!</h2>

        <!--
            GEMACHT MIT <3 UND JAVASCRIPT
        -->

        <p>
            Willkommen zu Brackets, einem modernen, quelloffenen Code-Editor, der Webdesign versteht. Es ist ein
            einfacher, aber dennoch leistungsfähiger Editor, der Ihnen immer die richtigen Tools einblendet, sodass
            Sie die genau richtige Menge an Hilfestellung haben, wann immer Sie diese brauchen.
        </p>

        <!--
            WAS IST BRACKETS?
        -->
        <p>
            <em>Brackets ist eine andere Art Editor.</em>
            Brackets hat ein paar einzigartige Features wie Schnelles Bearbeiten, Live-Vorschau und zahlreiche
            weitere, die Sie in anderen Editoren vergeblich suchen werden. Zudem ist Brackets in JavaScript, HTML
            und CSS geschrieben. Das heißt, dass die meisten Brackets-Nutzer dazu in der Lage sind, den Editor selbst
            zu verändern und zu erweitern. Tatsächlich nutzen wir Brackets täglich, um Brackets zu verbessern.
            Lesen Sie weiter, um mehr über die Nutzung der Hauptfeatures zu erfahren.
        </p>
        
        <!--
            BEGINNEN SIE, IHRE EIGENEN DATEIEN ZU NUTZEN
        -->

        <h3>Projekte in Brackets</h3>
        <p>
            Um Ihren eigenen Code in Brackets zu bearbeiten, können Sie einfach den Ordner öffnen, der Ihre
            Dateien enthält.
            Brackets sieht den geöffneten Ordner als "Projekt"; Features wie Code-Vervollständigung, Live-Vorschau
            und Schnelles Bearbeiten nutzen nur Dateien im aktuell geöffneten Ordner.
        </p>
        
        <samp>
            Sobald Sie bereit sind, dieses Beispielprojekt zu verlassen und Ihren eigenen Code zu editieren, können
            Sie die Drop-Down-Liste auf der linken Seite nutzen, um einen Ordner auszuwählen. Die Drop-Down-Liste
            heißt zurzeit "Erste Schritte" - das ist der Ordner, der die aktuell geöffnete Datei enthält. Klicken
            Sie darauf und wählen Sie daraufhin "Ordner öffnen…", um Ihren eigenen Ordner zu öffnen.
            Sie können auf diese Weise auch später wieder zu zuvor geöffneten Ordnern, wie diesem Beispielprojekt,
            zurückkehren.
        </samp>

        <!--
            DIE BEZIEHUNG VON HTML, CSS UND JAVASCRIPT
        -->
        <h3>Schnelles Bearbeiten von CSS und JavaScript</h3>
        <p>
            Kein Wechsel zwischen Dokumenten mehr - so verlieren Sie nie den Überblick. Wenn Sie HTML editieren,
            können Sie die Tastenkombination <kbd>Cmd/Strg + E</kbd> verwenden, um einen Inline-Editor anzuzeigen,
            der Ihnen alle relevanten CSS-Regeln zum Schnellen Bearbeiten anzeigt.
            Ändern Sie etwas im CSS, drücken Sie <kbd>ESC</kbd> und schon sind Sie zurück im HTML-Code. Oder lassen
            Sie die CSS-Regeln einfach offen und sie werden Teil ihres HTML-Editors. Sobald Sie <kbd>ESC</kbd>
            außerhalb eines solchen Editors drücken, schließen sich alle zusammen. Ein Inline-Editor zeigt Ihnen
            auch Regeln in LESS- und SCSS-Dateien, inklusive geschachtelter Regeln.
        </p>

        <samp>
            Sie wollen das in Aktion sehen? Setzen Sie Ihren Cursor auf den <!-- <samp> -->-Tag oben und drücken
            Sie <kbd>Cmd/Strg + E</kbd>. Sie sollten einen Editor zum Schnellen Bearbeiten von CSS erscheinen sehen,
            der die geltenden CSS-Regeln anzeigt. Das Schnelle Bearbeiten funktioniert genauso in Klassen- und
            ID-Attributen. Sie können es zudem in LESS- und SCSS-Dateien nutzen.
            
            Sie können auf die selbe Weise neue Regeln erstellen. Klicken Sie in einen der <!-- <p> -->-Tags weiter
            oben und drücken Sie <kbd>Cmd/Strg + E</kbd>. Es gibt noch keine Regeln dafür, aber Sie können den
            "Neue Regel"-Button nutzen, um eine neue Regel für <!-- <p> --> hinzuzufügen.
        </samp>

        <a href="screenshots/quick-edit.png">
            <img alt="Ein Screenshot, der Schnelles Bearbeiten von CSS zeigt" src="screenshots/quick-edit.png" />
        </a>

        <p>
            Sie können die selbe Tastenkombination nutzen, um andere Dinge auf die selbe Weise zu bearbeiten - wie
            JavaScript-Funktionen, Farben und Animations-Timing-Funktionen - und wir fügen ständig mehr hinzu.
        </p>
        <p>
            Im Augenblick können solche Editoren allerdings nicht verschachtelt werden. Sie können das
            Schnelle Bearbeiten also nur nutzen, während der Cursor sich im Haupteditor befindet.
        </p>

        <!--
            LIVE-VORSCHAU
        -->
        <h3>Vorschau auf HTML- und CSS-Änderungen live im Browser anzeigen</h3>
        <p>
            Sie kennen den "Speichern/Neu laden-Tanz", den wir seit Jahren aufführen? Der, in dem Sie
            Änderungen in Ihrem Editor machen, Speichern drücken, zum Browser schalten und dann neu laden,
            um schließlich das Ergebnis zu sehen? Mit Brackets müssen Sie diesen Tanz nicht aufführen.
        </p>
        <p>
            Brackets öffnet eine <em>Live-Verbindung</em> zu Ihrem lokalen Browser und sendet HTML- und CSS-Updates,
            während Sie tippen! Eventuell tun Sie etwas Ähnliches bereits heute mit browserbasierten Tools,
            doch mit Brackets ist kein Kopieren und Einfügen des endgültigen Codes im Editor mehr nötig.
            Ihr Code läuft im Browser, aber lebt in Ihrem Editor!
        </p>

        <h3>Hervorheben von HTML-Elementen und CSS-Regeln - live!</h3>
        <p>
            Brackets macht es Ihnen leicht, zu sehen, welche Auswirkungen Ihre Änderungen in HTML und CSS auf die
            Seite haben werden. Wenn Ihr Cursor auf einer CSS-Regel platziert ist, hebt Brackets alle zugehörigen
            Elemente im Browser hervor. Genauso wird Brackets beim Editieren einer HTML-Datei die entsprechenden
            HTML-Elemente im Browser markieren.
        </p>

        <samp>
            Falls Sie Google Chrome installiert haben, können Sie das selbst ausprobieren. Klicken Sie auf
            das Blitz-Symbol oben rechts oder drücken Sie <kbd>Cmd/Strg + Alt + P</kbd>. Wenn die Live-Vorschau
            für ein HTML-Dokument aktiviert ist, können alle verknüpften CSS-Dokumente in Echtzeit bearbeitet
            werden. Das Symbol ändert die Farbe von grau nach gold, sobald Brackets eine Verbindung zu Ihrem
            Browser hergestellt hat.

            Platzieren Sie Ihren Cursor jetzt auf dem <!-- <img> -->-Tag oben. Sie sehen in Chrome eine blaue
            Markierung, die um das Bild herum erscheint. Nutzen Sie nun <kbd>Cmd/Strg + E</kbd>, um die
            definierten CSS-Regeln anzuzeigen.
            Probieren Sie, die Stärke des Rahmens von 10px auf 20px zu ändern, oder ändern Sie die
            Hintergrundfarbe von "transparent" zu "hotpink". Falls Sie Brackets und Ihren Browser nebeneinander
            laufen haben, können Sie die Änderungen sofort in Ihrem Browser erkennen. Cool, was?
        </samp>

        <p class="note">
            Derzeit unterstützt Brackets die Live-Vorschau nur für HTML und CSS. Allerdings werden in der aktuellen
            Version Änderungen an JavaScript-Dateien automatisch neu geladen, wenn Sie diese speichern. Wir arbeiten
            momentan an der Unterstützung der Live-Vorschau für JavaScript.
            Die Live-Vorschau ist außerdem nur mit Google Chrome möglich, doch wir hoffen, diese Funktionalität
            zukünftig zu allen wichtigen Browsern hinzuzufügen.
        </p>

        <h3>Schnelle Farbansicht</h3>
        <p>
            Für die unter uns, die immer noch nicht die Farb-Äquivalente von HEX- und RGB-Werten kennen, macht es
            Brackets einfach und schnell, exakt zu sehen, welche Farbe genutzt wird. Fahren Sie in HTML oder CSS
            einfach über einen Farbwert oder -verlauf und Brackets wird Ihnen automatisch eine Vorschau davon
            anzeigen. Das selbe gilt für Bilder: Platzieren Sie den Cursor im Brackets-Editor über einem Link zu
            einem Bild und er wird ein Miniaturansicht von diesem Bild zeigen.
        </p>

        <samp>
            Um die Schnelle Farbansicht selbst auszuprobieren, können Sie Ihren Cursor auf dem
            <!-- <body> -->-Tag am Anfang dieses Dokuments platzieren und <kbd>Cmd/Strg + E</kbd> drücken, um einen
            CSS-Schnell-Editor zu öffnen. Fahren Sie nun einfach mit dem Cursor über einen der Farbwerte im
            CSS-Code. Sie können das auch mit Farbverläufen sehen, wenn Sie einen Schnell-Editor für den
            <!-- <html> -->-Tag anzeigen lassen und über irgendeinen der "background-image"-Farbwerte fahren. Um
            die Bildvorschau auszuprobieren, können Sie Ihren Cursor auf dem Screenshot-Link platzieren, den Sie
            weiter oben in diesem Dokument finden.
        </samp>

        <h3>Sie benötigen etwas anderes? Probieren Sie es mit einer Erweiterung!</h3>
        <p>
            Zusätzlich zu all dem, was in Brackets eingebaut ist, hat unsere große und wachsende Community der
            Erweiterungs-Entwickler hunderte Erweiterungen erstellt, die nützliche Funktionen bringen. Wenn
            Sie etwas brauchen, was es nicht in Brackets gibt, ist es sehr wahrscheinlich, dass bereits jemand
            eine Erweiterung dafür geschrieben hat. Um die Liste der verfügbaren Erweiterungen zu durchstöbern
            oder zu durchsuchen nutzen Sie <strong>Datei > Erweiterungs-Verwaltung</strong> und klicken auf
            den Tab "Verfügbar". Wenn Sie eine Erweiterung finden, die Sie nutzen wollen, klicken Sie einfach
            auf den "Installieren"-Button daneben.
        </p>

        <!--
            LASSEN SIE UNS WISSEN, WAS SIE DENKEN
        -->
        <h2>Machen Sie mit</h2>
        <p>
            Brackets ist ein Open-Source-Projekt. Web-Entwickler rund um die Welt helfen mit, einen besseren
            Code-Editor zu bauen. Noch mehr erstellen Erweiterungen, die die Möglichkeiten von Brackets erweitern.
            Lassen Sie uns wissen, was Sie denken, teilen Sie Ihre Ideen oder tragen
            Sie direkt zu dem Projekt bei.
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Brackets Team-Blog</a></li>
            <li><a href="https://github.com/adobe/brackets">Brackets auf GitHub</a></li>
            <li><a href="https://brackets-registry.aboutweb.com">Brackets Erweiterungs-Verzeichnis</a></li>
            <li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
            <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets Developer-Mailingliste</a></li>
            <li><a href="https://twitter.com/brackets">@brackets auf Twitter</a></li>
            <li>Mit Brackets-Entwicklern via IRC in <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets auf Freenode</a> chatten</li>
        </ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->